<!--
 * @Author: 朱安武 549410045@qq.com
 * @Date: 2023-01-09 15:40:43
 * @LastEditors: 朱安武 549410045@qq.com
 * @LastEditTime: 2023-01-10 09:49:01
 * @FilePath: \pinia-todo-setup\src\components\TodoFilter.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <label>
      <input type="radio" name="status" v-model="type" value="0"/>
      全部({{ todoStore.todoList.length }})
    </label>
    <label>
      <input type="radio" name="status" v-model="type" value="1"/>
      未完成({{todoStore.todoList.length-finish.length}})
    </label>
    <label>
      <input type="radio" name="status" v-model="type" value="2"/>
      已完成({{ finish.length }})
    </label>
  </div>
</template>


<script setup>
import { computed,watch,ref } from 'vue'
import { useTodoStore } from '../stores/todo-store'

const todoStore = useTodoStore()

const finish = computed(()=>{
  const finished = todoStore.todoList.filter(item =>item.isFinished === true)
  return finished
})

const type = ref('0')

watch(type,(newtype)=>{
  todoStore.setFilter(newtype)
})
</script>